<template>
  <div class="bidding-item">
    <el-row class="bidding-title">
      <el-col :span="8"><div class="grid-content bg-purple">{{$t('bidding.name')}}</div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-light">{{$t('bidding.type')}}</div></el-col>
      <el-col :span="5"><div class="grid-content bg-purple">{{$t('bidding.region')}}</div></el-col>
      <el-col :span="5"><div class="grid-content bg-purple-light">{{$t('bidding.releaseTime')}}</div></el-col>
      <el-col :span="2"><div class="grid-content bg-purple">{{$t('bidding.handle')}}</div></el-col>
    </el-row>
    <div class="have-data" v-if="propsData.length !== 0">
      <div class="item-detail" v-for="(item, index) in propsData">
        <el-row>
          <el-col :span="8">
            <el-tooltip class="item" effect="light" :content="item.title" placement="right-end">
              <div class="item-name">{{item.title}}</div>
            </el-tooltip>
          </el-col>
          <el-col :span="4"><div class="">{{item.status}}</div></el-col>
          <el-col :span="5"><div class="">{{item.area_name}}</div></el-col>
          <el-col :span="5"><div class="">{{item.publish_date}}</div></el-col>
          <el-col :span="2"><div class=""><span class="handle-text" @click="removeItem(item.uuid, index)">移除</span></div></el-col>
        </el-row>
      </div>
    </div>
    <div class="no-data" v-else>No Data ...</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
      }
    },
    methods: {
      async removeItem(object_id, index) {
        let params = {
          object_id
        }
        let res = await this.axios.post('collectionBidding/addAndDeleteCollection', params)
        this.propsData.splice(index, 1)
        // 刷新父组件中的地区下拉框数据。
        this.$emit('refreshRegion')
      }
    },
    props: ['propsData'],
  }
</script>

<style lang="scss" scoped>
  .bidding-item {
    .bidding-title {
      height: 60px;
      line-height: 60px;
      padding-left: 30px;
      background-color: #fff;
      /*font: bold 16px MicorsoftYaHei;*/
      font-weight: bold;
      font-size: 16px;
      font-family: MicorsoftYaHei;
      color: #666;
    }
    .have-data {
      .item-detail {
        height: 60px;
        line-height: 60px;
        width: 100%;
        padding-left: 30px;
        /*border: 1px solid #333;*/
        font: normal 16px MicorsoftYaHei;
        color: #2f2a72;
        .el-row {
          height: 60px;
          line-height: 60px;
        }
        &:nth-child(odd) {
          background-color: #f0f5fa;
        }
        &:nth-child(even) {
          background-color: #fff;
        }
        .item-name {
          cursor: pointer;
          max-width: 90%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .handle-text {
          /*font*/
          color: #0090e9;
          font-family: MicorsoftYaHei;
          font-size: 16px;
          cursor: pointer;
        }
      }
    }
    .no-data {
      margin-top: 30px;
      color: #ccc;
      text-align: center;
      font-size: 36px;
    }
  }
</style>
